<template>
	<view>
    <u-form :model="form" ref="uForm" label-width="50px" label-align="right" class="form-safari">
		  <u-form-item label="地址:" class="label-textarea">
        <u-input v-model="form.url" type="textarea" placeholder="请输入网页地址" maxlength="4096" />
      </u-form-item>
		  <u-form-item label="浏览:">
        <u-switch v-model="form.isAuto"></u-switch>
      </u-form-item>
    </u-form>
    <div class="footer-fixed">
      <u-button @click="handleSubmit" class="btn-submit" type="primary">浏览</u-button>
    </div>
	</view>
</template>
<script>

export default {
	data() {
		return {
      form: {
        url: '',
        isAuto: true
      }
		};
	},

  onNavigationBarButtonTap () {
    this.resolveQRCode()
  },

  methods: {
    handleSubmit () {
      if (!this.form.isAuto) {
        return true
      }
      if (!/^(http|\/\/)/.test(this.form.url)) {
        this.$u.toast('请输入正确的地址')
        return true
      }
      let url = /^\/\//.test(this.form.url) ? 'http:' + this.form.url : this.form.url
			uni.navigateTo({
				url: '/pages/common/webview?url=' + url
			})
    },

    // 解析二维码
    resolveQRCode () {
      this.scanCode().then(data => {
        this.form.url = data.result
        this.handleSubmit()
      })
    },

    // 扫码
    scanCode() {
      return new Promise((resolve, reject) => {
        uni.scanCode({
          success: (res) => {
            // 扫码成功回调
            resolve(res)
          },
          fail: () => {
            // 扫码失败回调
            uni.showToast({
              title: '扫码失败',
              icon: 'none'
            })
            reject(e)
          }
        })
      })
    }
  }
};
</script>
<style lang="scss">
.form-safari {
  padding: 8px;
}
.label-textarea {
  /deep/.u-form-item--left__content__label {
    line-height: 28px;
  }
  /deep/.u-form-item--left {
    align-items: flex-start;
  }
}
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: #fff;
  border-top: 1px #ebeef5 solid;
  z-index: 9;
  .btn-submit {
    width: 100%;
  }
}
</style>
